<template>
  <div class="box">
    <h2>2子组件</h2>
    值：<label>{{count}}</label>
    <br>
    <button @click="countSub(1)">值 -1</button>
    <button @click="countSub(5)">值 -5</button>
    <button @click="changeHandleSluggish(888)">一秒更改数值为888</button>
    <hr>
    <div>{{ filterList }}</div>
    <hr>
    <div>user:{{ userInfo }}</div>
    <div>{{ userInfo.name }}</div>
    <button @click="ChangeInfo({name:'yiyiyi',age:17})">更新个人信息</button>
    <button @click="setUser({name:'yiersan',age:27})">一秒后更新个人信息</button>
    <div>setting:{{ theme }} - {{ desc }}</div>
    <button @click="ChangeTheme('blue')">更新主题</button>
    <hr>
    <div>{{ UpCaseName }}</div>

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  methods: {
    ...mapMutations(['countSub']),
    ...mapMutations('user', ['ChangeInfo']),
    ...mapMutations('setting', ['ChangeTheme']),
    ...mapActions(['changeHandleSluggish']),
    ...mapActions('user', ['setUser'])
    /*     sunCount (n) {
      this.countSub(n)
    } */
  },
  computed: {
    ...mapState(['count']),
    ...mapState('user', ['userInfo']),
    ...mapState('setting', ['theme', 'desc']),

    ...mapGetters(['filterList']),
    ...mapGetters('user', ['UpCaseName'])
  }
}
</script>

<style>
.box{
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2{
    margin-top: 10px;
  }
</style>
